iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 5
0
Modern Web

Angular10 實作教學系列 第 5

NG10鐵人賽 - 5 - Angular Material 日期使用(5) - 選擇日期並限制下一個日期的選擇

  • 分享至 

  • xImage
  •  

選擇開始日期,限制結束日期的選擇日期

html

<input [owlDateTime]="dt2" placeholder="開始日期" (dateTimeChange)="changeDateTime($event)">
<mat-datepicker-toggle [owlDateTimeTrigger]="dt2"></mat-datepicker-toggle>
<owl-date-time #dt2></owl-date-time>

<input [owlDateTime]="dt3" placeholder="結束日期" [min]="minDate">
<mat-datepicker-toggle [owlDateTimeTrigger]="dt3"></mat-datepicker-toggle>
<owl-date-time #dt3></owl-date-time>

ts

export class AppComponent {
    minDate;

    changeDateTime(event): void {
        this.minDate = event.value;
    }
}

操作行為:

當第一個日期選擇 2020.09.06 20:20,下一個日期就無法選擇之前的日期時間了。

畫面:

https://ithelp.ithome.com.tw/upload/images/20200905/20107754230e5k7Ckz.png

input[owlDateTime]

https://ithelp.ithome.com.tw/upload/images/20200905/201077548kSVoMxPN9.png


上一篇
NG10鐵人賽 - 4 - Angular Material 日期使用(4) - 日期範圍選取;過濾選取日期
下一篇
NG10鐵人賽 - 6 - 添加 API 的 Request Header 欄位
系列文
Angular10 實作教學30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言